<!DOCTYPE html>
<html>

<head>
<th:block th:replace="/fragments/head" />
</head>

<body class="dashboard-page sb-l-o">
	<!--/* 主题设置面板 */-->
	<div th:replace="/fragments/skin-toolbox"></div>

	<!-- BEGIN: 主页面 -->
	<div id="main">
		<!--/* 顶部导航 */-->
		<header th:replace="/fragments/header-banner"></header>
		<!--/* 左侧功能菜单导航 */-->
		<aside th:replace="/fragments/aside"></aside>
		<!-- BEGIN: Content-Wrapper -->
		<section id="content_wrapper">
			<!--/* 模块路径导航条 */-->
			<header th:replace="/fragments/header-breadcrumb"></header>

			<!-- Begin: 业务办理区 -->
			<section id="content" class="animated fadeIn">

				<!-- Input Fields -->
				<div class="panel">
					<div class="panel-heading">
						<span class="panel-title">查询条件</span>
					</div>
					<div class="panel-body">
						<form id="fo_query" class="form-horizontal" role="form">
							<div class="form-group">
								<label for="inputStandard" class="col-md-1 control-label">参数名称：</label>
								<div class="col-md-2">
									<input name="name" class="form-control" />
								</div>
								<label for="disabledInput" class="col-md-1 control-label">参数键：</label>
								<div class="col-md-2">
									<input name="param_key" class="form-control" />
								</div>
								<label for="disabledInput" class="col-md-1 control-label">参数值</label>
								<div class="col-md-2">
									<input name="value" class="form-control" />
								</div>
								<label for="inputSelect" class="col-md-1 control-label">所属系统：</label>
								<div class="col-md-2">
									<select name="sys_key" class="basic-single form-control">
										<option></option>
										<option value="0">平台全局</option>
									</select>
								</div>
							</div>
						</form>
					</div>
					<div class="panel-footer text-center">
						<button id="btn_query" class="btn btn-default btn-gradient btn-sm ph15" type="button">
							<span class="glyphicon glyphicon-search"></span> 查询
						</button>
						<button class="btn btn-default btn-gradient btn-sm ph15" type="button">
							<span class="glyphicon glyphicon-repeat"></span> 重置
						</button>
					</div>
				</div>

				<div class="row">
					<div class="col-md-12">
						<div class="panel panel-visible" id="spy1">
							<div class="panel-heading">
								<span class="panel-title">键值参数列表</span>
								<div class="widget-menu pull-right mr5">
									<button id="btn_new" class="btn btn-default btn-gradient btn-sm ph15" type="button">
										<span class="glyphicon glyphicon-plus"></span> 新增
									</button>
								</div>
							</div>
							<div class="panel-body pn">
								<table id="dt_param" class="table table-striped table-hover" cellspacing="0" width="100%">
									<thead>
										<tr>
											<th>编号</th>
											<th>参数名称</th>
											<th>参数键</th>
											<th>参数值</th>
											<th>所属系统</th>
											<th>更新时间</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>

				<!-- 新增参数窗口 -->
				<div id="w-add-param" class=" popup-basic admin-form mfp-with-anim mfp-hide">
					<div class="panel">
						<div class="panel-heading">
							<span class="panel-title"><i class="fa fa-rocket"></i>Leave a comment</span>
						</div>
						<!-- end .panel-heading section -->

						<form id="comment">
							<div class="panel-body p25">
								<div class="section row">
									<div class="col-md-6">
										<label for="firstname" class="field prepend-icon">
											<input type="text" name="firstname" id="firstname" class="gui-input" placeholder="First name..." />
											<label for="firstname" class="field-icon">
												<i class="fa fa-user"></i>
											</label>
										</label>
									</div>
									<!-- end section -->

									<div class="col-md-6">
										<label for="lastname" class="field prepend-icon">
											<input type="text" name="lastname" id="lastname" class="gui-input" placeholder="Last name..." />
											<label for="lastname" class="field-icon">
												<i class="fa fa-user"></i>
											</label>
										</label>
									</div>
									<!-- end section -->

								</div>
								<!-- end section row section -->

								<div class="section row">
									<div class="col-md-6">
										<label for="email" class="field prepend-icon">
											<input type="email" name="email" id="email" class="gui-input" placeholder="Email address" />
											<label for="email" class="field-icon">
												<i class="fa fa-envelope"></i>
											</label>
										</label>
									</div>
									<!-- end section -->

									<div class="col-md-6">
										<label for="website" class="field prepend-icon">
											<input type="url" name="website" id="lastname" class="gui-input" placeholder="Website url..." />
											<label for="website" class="field-icon">
												<i class="fa fa-globe"></i>
											</label>
										</label>
									</div>
									<!-- end section -->

								</div>
								<!-- end section row section -->

								<div class="section">
									<label for="comment" class="field prepend-icon">
										<textarea class="gui-textarea" id="comment" name="comment" placeholder="Your comment"></textarea>
										<label for="comment" class="field-icon">
											<i class="fa fa-comments"></i>
										</label>
										<span class="input-footer"> <strong>Hey You:</strong> We expect a great comment...
										</span>
									</label>
								</div>
								<!-- end section -->

							</div>
							<!-- end .form-body section -->

							<div class="panel-footer">
								<button type="submit" class="button btn-primary">Post Comment</button>
							</div>
							<!-- end .form-footer section -->
						</form>
					</div>
					<!-- end: .panel -->
				</div>
				<!-- end: 新增参数窗口 -->

			</section>
			<!-- End: 业务办理区 -->

			<!--/* 页脚 */-->
			<footer th:replace="/fragments/footer"></footer>

		</section>
		<!-- End: Content-Wrapper -->

	</div>
	<!-- End: 主页面 -->

	<!--/* 公共脚本文件 */-->
	<th:block th:include="/fragments/scripts" />

	<script th:inline="javascript">
		/*<![CDATA[*/
		jQuery(document).ready(function() {
			"use strict";
			Core.init();
			$("#btn_query").on("click", function(event) {
				queryParams();
			});
			$("#btn_new").on("click", function(event) {
				openNewParam();
			});
			
			$('#dt_param').on('init.dt', queryParams);

			$('#dt_param').dataTable({
				dom : 'tr<"dt-panelfooter clearfix"lip>',
				pageLength : 20,
				lengthMenu : [ [ 10, 20, 50, 200, 500 ], [ 10, 20, 50, 200, 500 ] ],
				ordering : false,
				processing : true,
				serverSide : false, //false：一次查询，客户端分页的模式；true：服务端分页模式
				deferLoading : 0, //屏蔽初始化后自动加载数据
				pagingType : "full_numbers",
				columns : [ {
					data : "id",
					width : 60
				}, {
					data : "name",
					width : 200
				}, {
					data : "param_key",
					width : 150
				}, {
					data : "value"
				}, {
					data : "sys_key",
					width : 200
				}, {
					data : "update_time",
					width : 150
				} ]
			});

			$(".basic-single").select2({
				placeholder : "请选择...",
				allowClear : true
			});

			function queryParams() {
				var ajax = {
					url : "list",
					type : "POST",
					data : My.params('#fo_query')
				}
				$('#dt_param').DataTable().settings()[0].ajax = ajax;
				$('#dt_param').DataTable().ajax.reload();
			}
			
			function openNewParam(){
                $.magnificPopup.open({
                    items: {
                        src: '#w-add-param'
                    }
                });
			}

		});
		/*]]>*/
	</script>

</body>

</html>
